<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="mb-4">
          <el-button type="danger" @click="handleBack">返回</el-button>
        </div>
        <div class="">
          <el-select
            class="mr-4"
            v-model="listQuery.is_out_time"
            clearable
            placeholder="请选择是否超时"
          >
            <el-option label="不超时" :value="1"></el-option>
            <el-option label="超时" :value="2"></el-option>
          </el-select>
          <el-select
            class="mr-4"
            v-model="listQuery.record_type"
            clearable
            placeholder="请选择记录类型"
          >
            <el-option label="定时任务" :value="1"></el-option>
            <el-option label="手动" :value="2"></el-option>
          </el-select>
          <el-input
            style="width:200px"
            clearable
            class="mr-4"
            v-model="listQuery.min_use_time"
            placeholder="请输入最小响应时间"
          ></el-input>
          <el-input
            style="width:200px"
            clearable
            class="mr-4"
            v-model="listQuery.max_use_time"
            placeholder="请输入最大响应时间"
          ></el-input>
          <el-button type="primary" @click="deBounceWrap(initData)">
            搜索
          </el-button>
          <el-button type="primary" @click="deBounceWrap(handleReset)">
            重置
          </el-button>
        </div>
      </div>
      <el-table border stripe size="mini" :data="tableData" v-loading="loading">
        <el-table-column width="50" label="ID" prop="id" />
        <el-table-column width="120" label="是否超时" prop="is_out_time">
          <template slot-scope="{ row }">
            <el-tag :type="row.is_out_time | getTimeOutColor">{{
              row.is_out_time | getTimeOutText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="接口原始数据" prop="origin_data">
          <template slot-scope="{ row }">
            <json-viewer
              :value="getJSONData(row.origin_data)"
              :expand-depth="5"
              copyable
            ></json-viewer>
          </template>
        </el-table-column>

        <el-table-column width="120" label="记录类型" prop="record_type">
          <template slot-scope="{ row }">
            <el-tag :type="row.record_type === 1 ? 'warning' : 'primary'"
              >{{ row.record_type === 1 ? "定时任务" : "手动" }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="响应时间" width="120" prop="use_time">
          <template slot-scope="{ row }">
            <span>{{ row.use_time }} 毫秒</span>
          </template>
        </el-table-column>

        <el-table-column label="时间数据" align="center">
          <el-table-column
            label="创建时间"
            width="100"
            prop="created_at"
            align="center"
          />
          <el-table-column
            label="最后更新时间"
            width="100"
            prop="updated_at"
            align="center"
          />
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-3 text-right"
        background
        :page-size="10"
        layout="total, prev, pager, next"
        :total="meta.total"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";

import { threeCheckRecordList } from "@/api/config/thirdPartDetect";
import { NOOP } from "@/utils";

export default {
  name: "thirdPartDetectLog",
  components: {
    JsonViewer
  },
  data() {
    return {
      serverType: -1,
      loading: false,
      tableData: [],
      listQuery: {
        is_out_time: null,
        record_type: null,
        min_use_time: null,
        max_use_time: null
      },
      meta: {
        page: 1,
        page_size: 10,
        total: 0
      }
    };
  },
  filters: {
    getTimeOutText(value) {
      switch (value) {
        case 1:
          return "未超时";
        case 2:
          return "超时2秒";
        case 3:
          return "超时5秒";
      }
    },

    getTimeOutColor(value) {
      switch (value) {
        case 1:
          return "success";
        case 2:
          return "warning";
        case 3:
          return "danger";
      }
    }
  },
  created() {
    this.serverType = this.$route.query.serverType;
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      threeCheckRecordList(this.serverType, this.meta, this.listQuery)
        .then(res => {
          const {
            data: { list, total }
          } = res;
          this.tableData = list;
          this.meta.total = total;
        })
        .catch(NOOP)
        .finally(() => (this.loading = false));
    },
    handleReset() {
      this.listQuery = {
        is_out_time: null,
        record_type: null,
        min_use_time: null,
        max_use_time: null
      };
      this.initData();
    },
    handleCurrentChange(page) {
      this.meta.page = page;
      this.initData();
    },

    getJSONData(jsonString) {
      return JSON.parse(jsonString);
    },
    handleBack() {
      this.$router.push("/config/thirdPartDetect");
    }
  }
};
</script>

<style scoped></style>
